<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-form
          :inline="true"
          :model="stalist"
          size="mini"
          class="demo-form-inline"
        >
          <el-form-item label="活动区域">
            <el-select
              v-model="stalist.status_id"
              placeholder="请选择订单状态"
              @change="gaibian"
            >
              <el-option label="全部" value="0">全部</el-option>
              <el-option
                v-for="(item, index) in sta"
                :key="index"
                :label="item.status_text"
                :value="item.status_id"
              >
                {{ item.status_text }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="porder" stripe ref="multipleTable">
        <el-table-column prop="quid" label="订单编号" width="150"> </el-table-column>
        <el-table-column prop="multi_store" label="店名"> </el-table-column>
        <el-table-column prop="created_time" label="下单时间">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="phonenumber" label="手机号"> </el-table-column>
        <el-table-column prop="user_name" label="点餐人姓名"> </el-table-column>
        <el-table-column prop="amount" label="总价格"> </el-table-column>
        <el-table-column prop="pay_mode" label="支付方式"> </el-table-column>
        <el-table-column prop="status_text" label="订单状态"> </el-table-column>
        <el-table-column prop="postscript" label="备注"> </el-table-column>

        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button
              type="info"
              size="small"
              style="box-shadow: 2px 2px 5px black"
              @confirm="Details"
              @click="Details(row)"
              >详情
            </el-button>

            <el-button
              v-show="row.status_text === '已支付，待制作'"
              type="primary"
              size="small"
              style="box-shadow: 2px 2px 5px black"
              @click="gai(row.id, 2)"
              >已制作</el-button
            >

            <el-button
              v-show="row.status_text === '已制作，待取餐'"
              type="primary"
              size="small"
              style="margin-left: 10px; box-shadow: 2px 2px 5px black"
              @click="gai(row.id, 3)"
              >已取餐</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        :page-sizes="[5, 10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      title="详情"
      append-to-body
      width="800px"
      top="20vh"
      :visible.sync="editDialogFormVisible"
    >
      <Details
        dialogVisible.sync="editDialogFormVisible"
        :data="editData"
        @refresh="getPorderList"
      ></Details>
    </el-dialog>
  </div>
</template>

<script>
import Details from "./Details.vue";

export default {
  name: "",
  data() {
    return {
      status_id: 0,
      stalist: {},
      //复选框
      multipleSelection: [],

      //分页列表
      count: 0,
      size: 5,
      page: 1,
      porder: [],

      editData: {},

      editDialogFormVisible: false,
    };
  },
  created() {
    this.getPorderList();
  },
  methods: {
    getPorderList() {
      this.axios({
        method: "get",
        url: "DDmanage/Status",
        params: {},
        data: {},
      })
        .then((res) => {
          this.sta = res.data.data;
        })
        .catch((err) => {
          console.log("err: ", err);
        });

      this.axios({
        method: "get",
        url: "DDmanage/Porder",
        params: { page: this.page, limit: this.size, sid: this.status_id },
        data: {},
        // headers:{Authorization: this.user.Token}
      })
        .then((res) => {
          console.log("res: ", res);
          this.count = res.data.count;
          this.porder = res.data.data;
        })
        .catch((err) => {
          console.log("err: ", err);
        });
    },
    gai(id, status) {
      this.axios({
        method: "put",
        url: "DDmanage/UpdateStatus",
        params: { id: id, sid: status },
        data: {},
      })
        .then((res) => {
          if (res.data.code > 0) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });

            this.getPorderList();
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("err: ", err);
        });
    },
    //切换每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page = 1;
      this.size = val;
      this.getPorderList();
    },
    //翻页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getPorderList();
    },

    //详情 弹窗
    Details(row) {
      this.editData = row;
      this.editDialogFormVisible = true;
    },
    gaibian() {
      this.status_id = this.stalist.status_id;
      this.getPorderList();
    },
  },

  components: {
    Details,
  },
};
</script>

<style scoped>
/* .demo-form-inline {
    float: right;
} */

.demo-form-inline .el-form-item {
  margin-bottom: 0px;
}
</style>